import React, { Component } from "react";
import axios from "axios";
import Loading from "./components/Loading";
class App extends Component {
    state = {
        items: [],
        isLoading: true, // 是否正在加载中
    }
    render() {
        // 3- 将加载中功能封装为组件
        return (
            <div>
                {this.state.isLoading ? <Loading /> : (
                    <div>
                        {
                            this.state.items.map(item => (
                                <p key={item.id}>
                                    <a href={item.html_url}>{item.full_name}</a>
                                </p>
                            ))
                        }
                    </div>
                )}
            </div>
        );
        // 2- 三元表达式
        // return (
        //     <div>
        //         {this.state.isLoading?<h3>正在拼命加载中……</h3>:(
        //             <div>
        //                 {
        //                     this.state.items.map(item=>(
        //                         <p key={item.id}>
        //                             <a href={item.html_url}>{item.full_name}</a>
        //                         </p>
        //                     ))
        //                 }
        //             </div>
        //         )}
        //     </div>
        // )

        // 1
        // if(this.state.isLoading)
        //     return <h3>正在拼命加载中……</h3>
        // return (
        //     <div>
        //         {
        //             this.state.items.map(item=>(
        //                 <p key={item.id}>
        //                     <a href={item.html_url}>{item.full_name}</a>
        //                 </p>
        //             ))
        //         }
        //     </div>
        // );
    }
    componentDidMount() {
        // axios.get("https://api.github.com/search/repositories",
        //     {
        //         params: {
        //             q: "react",
        //             sort: "stars"
        //         }
        //     }).then(value => {
        //         this.setState({
        //             items: value.data.items
        //         })
        //     })
        this.searchRepositories();
    }
}
export default App;